<template>
  <BlueBackground :title="'安全中心'">
    <div class="safe-box">
      <div class="cell-box">
        <van-cell title="修改密码" is-link @click="isEditPassword = true" />
        <van-cell title="注销账号" is-link @click="methods.destroy" />
      </div>
      <div class="leave">
        <van-button
          type="primary"
          size="large"
          round
          color="rgb(12,52,186)"
          @click="methods.onLogOut"
        >
          退出登录
        </van-button>
      </div>

      <van-action-sheet v-model:show="isEditPassword" title="修改密码">
        <div class="content">
          <van-form @submit="methods.onSubmit">
            <van-field
              v-model="oldPassword"
              name="oldPassword"
              label="旧密码"
              placeholder="旧密码"
              :type="isShowOldPassword ? 'text' : 'password'"
              :right-icon="isShowOldPassword ? 'eye-o' : 'closed-eye'"
              @click-right-icon="methods.onChangeShowOldPassword"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: /^[A-Za-z]\w{5,15}$/
                }
              ]"
            />
            <van-field
              v-model="newPassword"
              name="newPassword"
              label="新密码"
              placeholder="新密码"
              :type="isShwoNewPassword ? 'text' : 'password'"
              :right-icon="isShwoNewPassword ? 'eye-o' : 'closed-eye'"
              @click-right-icon="methods.onChangeShowNewPassword"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: /^[A-Za-z]\w{5,15}$/
                }
              ]"
            />
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </div>
      </van-action-sheet>
    </div>
  </BlueBackground>
</template>

<script lang="ts" setup>
import BlueBackground from '@/components/BlueBackground.vue'
import { ref } from 'vue'
import { DELETE, postFormData, PUT } from '@/api'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store'

const router = useRouter()
const isEditPassword = ref(false)
const oldPassword = ref('')
const newPassword = ref('')
const isShowOldPassword = ref(false)
const isShwoNewPassword = ref(false)
const userStore = useUserStore()

const methods = {
  onSubmit() {
    PUT({
      url: '/auth/password/update',
      params: {
        oldPassword: btoa(oldPassword.value),
        newPassword: btoa(newPassword.value)
      }
    })
      .then((res) => {
        if (res.data) {
          showToast(res.message)
          oldPassword.value = ''
          newPassword.value = ''
          isEditPassword.value = false
          userStore.logout()
        } else {
          oldPassword.value = ''
          newPassword.value = ''
          showToast(res.message)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  },
  onChangeShowOldPassword() {
    isShowOldPassword.value = !isShowOldPassword.value
  },
  onChangeShowNewPassword() {
    isShwoNewPassword.value = !isShwoNewPassword.value
  },
  destroy() {
    showConfirmDialog({
      title: '注销账号',
      message: '是否确认注销，一旦注销无法恢复'
    })
      .then(() => {
        DELETE({
          url: '/auth/destroy'
        })
          .then(() => {
            userStore.logout()
            showSuccessToast('注销成功')
            router.push({ name: 'Login' })
          })
          .catch((err) => {
            console.error(err)
          })
      })
      .catch(() => {})
  },
  onLogOut() {
    postFormData({
      url: '/auth/logout'
    })
      .then((res) => {
        if (res.data) {
          showSuccessToast('退出登录成功')
          router.push({ name: 'Login' })
        } else {
          router.push({ name: 'Login' })
        }
      })
      .catch((err) => {
        console.error(err)
      })
      .then(() => {
        userStore.logout()
      })
  }
}
</script>

<style lang="less" scoped>
.safe-box {
  width: 90%;
  margin: 0 auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  .cell-box {
    padding: 20px 0 10px;
    background-color: #fff;
  }
  .leave {
    margin-top: 100px;
  }
}
.content {
  padding: 16px 16px 160px;
}
</style>
